@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  @apply min-h-screen from-ziggurat-50 to-ziggurat-400 bg-gradient-to-br flex flex-col;
}

#app {
  @apply grow flex-col flex;
}

main,
footer,
header {
  @apply px-10;
}

main {
  @apply grow;
}

h1 {
  @apply pb-3 text-7xl text-center font-amatic;
  letter-spacing: 0.8rem;
  font-weight: 700;
}

h2 {
  @apply text-5xl py-10 text-center font-amatic;
  letter-spacing: 0.4rem;
}

h5 {
  @apply text-2xl mb-3;
}

h6 {
  @apply text-xl;
}

kbd {
  @apply text-ziggurat-900 bg-slate-200 border border-ziggurat-300 px-2 rounded-md;
}

.nav-link {
  @apply text-ziggurat-950 border border-ziggurat-950 px-8 py-2 rounded-full flex flex-row gap-2 items-baseline;
  @apply hover:bg-ziggurat-600 hover:border-ziggurat-600 hover:text-ziggurat-200 active:bg-ziggurat-700;
  @apply transition-all duration-500 delay-75;
  @apply hover:shadow-ziggurat-600 hover:drop-shadow-md;
}

.card-container {
  @apply grid grid-cols-1 md:grid-cols-2 gap-10 2xl:grid-cols-3;
}

.summary-card {
  @apply hover:-translate-y-1;
  @apply flex-col lg:flex-row items-center shadow-ziggurat-700 drop-shadow-xl flex border border-ziggurat-400 rounded-xl p-8 gap-8 bg-ziggurat-200 text-lg hover:drop-shadow-2xl transition-all duration-500 hover:border-ziggurat-600;
}

.summary-card-image {
  @apply md:max-w-80 lg:max-w-40 grow-0 rounded-md drop-shadow-xl shadow-ziggurat-400;
}

.summary-card-text {
  @apply grow text-ziggurat-950 text-balance;
  font-weight: 400;
}

.letter-highlight {
  @apply text-ziggurat-700;
}

.skill-card {
  @apply bg-ziggurat-100 border border-ziggurat-400 p-6 rounded-xl flex flex-col gap-4 drop-shadow-lg shadow-ziggurat-700 hover:drop-shadow-2xl hover:border-ziggurat-500 justify-center;
  /* Animations */
  @apply transition-all duration-500;
  @apply hover:-translate-y-1;
}

.skill-card-header {
  @apply flex flex-row gap-3 items-center;

  & > .skill-card-header-text {
    @apply text-2xl text-ziggurat-950;
    font-weight: 500;
  }
}

.skill-card-header-icon {
  @apply bg-ziggurat-600 w-10 h-10 rounded-full text-ziggurat-100 flex justify-center items-center shadow-ziggurat-600 drop-shadow-xl;

  & > i {
    @apply flex p-0 m-0;
  }
}

.skill-card-body {
  @apply text-balance;
  line-height: 1.75;
}

.skill-subcard {
  @apply flex flex-col bg-ziggurat-200 rounded-lg p-2 px-4 gap-2;
  /* Shadow */
  @apply shadow-ziggurat-200 drop-shadow-md hover:drop-shadow-lg;
  @apply hover:grow;
}

.skill-subcard-header {
  @apply text-xl;
  font-weight: 400;
}

.skill-subcard-body {
  @apply font-light;
  line-height: 1.75;
}

.font-amatic {
  font-family: 'Amatic SC', sans-serif;
  font-weight: 700;
  font-style: normal;
}

.footer-link {
  @apply text-lg flex flex-row items-center gap-2 justify-start;
  @apply even:text-ziggurat-500 hover:text-ziggurat-600 active:text-ziggurat-700 odd:text-ziggurat-400;
}

footer > .fas,
footer > .fa-solid {
  @apply text-ziggurat-600 p-1 text-sm;
}

.mobile-clamp {
  max-width: 640px;
}

.btn {
  @apply rounded-lg w-full py-2 px-6 text-center;
  @apply drop-shadow-lg hover:drop-shadow-xl;
}
.btn.btn-flat {
  @apply bg-ziggurat-500 hover:bg-ziggurat-600 active:bg-ziggurat-700 text-ziggurat-50;
}
/* Projects section */
.project-card {
  @apply rounded-xl flex bg-ziggurat-700 min-h-40;
  @apply shadow-ziggurat-800 drop-shadow-md hover:drop-shadow-xl;
  @apply transition-all duration-200 hover:-translate-y-1;
}
.project-card-image {
  @apply flex grow rounded-xl;
}
.project-card-content {
  @apply grow flex flex-col justify-end  p-4 gap-3 rounded-xl;
  /* Gradient */
  /* @apply from-transparent to-ziggurat-600 bg-gradient-to-b; */
}
.project-card-body {
  @apply text-ziggurat-100 border border-ziggurat-400 grow p-4 rounded-md flex flex-col gap-3;
  @apply bg-ziggurat-500 bg-opacity-40 backdrop-filter backdrop-blur-sm;
}
.project-card-title {
  @apply text-2xl font-bold;
}
.project-tags-container {
  @apply flex flex-row flex-wrap gap-2;
}
.project-tag {
  @apply bg-ziggurat-300 text-ziggurat-950 px-3 rounded-full cursor-pointer;
  @apply transition-all duration-150;
  &:hover {
    @apply bg-ziggurat-400 text-ziggurat-100 px-4;
  }
}
